<!doctype html>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
<html lang="en">
<head>
<title>Map Demo</title>
<!-- <script src="https://openlayers.org/en/v4.4.2/build/ol.js" -->
<!-- 	type="text/javascript"></script> -->
<!-- <script -->
<!-- 	src="https://api.mapbox.com/mapbox.js/plugins/arc.js/v0.1.0/arc.js"></script> -->
<!-- <link rel="stylesheet" -->
<!-- 	href="https://openlayers.org/en/v4.4.2/css/ol.css" type="text/css"> -->
<script src="/statics/js/ol.js"></script>
<link rel="stylesheet" href="/statics/js/ol.css" type="text/css">
<style>
.map {
	clear: both;
	position: relative;
	width: 100%;
	height: 444px;
	border: 1px solid black;
}

#wrapper {
	width: 768px;
}

#location {
	float: right;
}
}
</style>
<script type="text/javascript">
	var map;
	var ChinaMap;
	var Airport;
	var AirLine;
	function load() {
		var bounds = [ -74.02722, 40.684221, -73.907005,
			40.878178 ];
// 		var bounds = [ 73.2516174316406, 17.9822978973389, 135.080017089844,
// 			53.7378730773926 ];
		var mousePositionControl = new ol.control.MousePosition({
			className : 'custom-mouse-position',
			target : document.getElementById('location'),
			coordinateFormat : ol.coordinate.createStringXY(2),
			undefinedHTML : '&nbsp;'
		});
// 		Airporta = new ol.layer.Tile({
// 			visible : true,
// 			source : new ol.source.TileWMS({
// 				url : 'http://10.70.94.96:8080/geoserver/tiger/wms',
// 				params : {
// 					'FORMAT' : 'image/png',
// 					'VERSION' : '1.1.1',
// 					tiled : true,
// 					STYLES : '',
// 					LAYERS : 'tiger:tiger_roads',
// 					//tilesOrigin : 73.2516174316406 + "," + 17.9822978973389
// 				}
// 			})
// 		});
	
		Airport = new ol.layer.Vector({
	        source: new ol.source.Vector({
	            url: 'http://localhost/statics/kml/tiger-tiger_roads.kml',
// 				url: '',
	            format: new ol.format.KML({extractStyles: false}),
	            style:new ol.style.Style({
	            	stroke: new ol.style.Stroke({
	            		color:'rgba(255, 34, 17, 0.2)',
	            		width:1
	            	}),
	            	fill:  new ol.style.Fill({
	            		color:'red'
	            	})
	            })
	          })
	        });
		var projection = new ol.proj.Projection({
			code : 'EPSG:4326',
			units : 'degrees',
			axisOrientation : 'neu',
			global : false
		});
		map = new ol.Map({
			controls : ol.control.defaults({
				attribution : false
			}).extend([ mousePositionControl ]),
			target : 'map',
			layers : [
// 				Airporta,
				Airport
			],
			view : new ol.View({
				projection : projection,
				zoom: 6
				
			})
		});
		map.getView().fit(bounds, map.getSize());
	};
	
	function AddTarget(){
		 var circle = new ol.Feature({
		        geometry: new ol.geom.Point(ol.Coordinate(93.94,37.15))
		    })
		    circle.setStyle(new ol.style.Style({
		        image: new ol.style.Circle({
		            radius: 10,
		            fill: new ol.style.Fill({
		                color: 'red'
		            })
		        })
		    }));

		 ChinaMap.getSource().addFeature(circle);
	}
	
</script>
</head>
<body onload="load()">
	<h2>My Map</h2>
	<div id="map" class="map"></div>
	<div id="wrapper">
		<div id="location"></div>
		<div id="scale"></div>
		<button onclick="RefreshFun()">ReFresh</button>
		<div style="align-items: center">
			<p>Open Layer Display China Map Demo.</p>
		</div>
</body>
</html>